/**
 * 响应式样式文件 - 整合版本
 * 统一管理所有移动端、平板端、桌面端的响应式样式
 */

/* ==================== 全局响应式变量 ==================== */
:root {
  /* 断点定义 */
  --mobile-max: 767px;
  --tablet-min: 768px;
  --tablet-max: 1023px;
  --desktop-min: 1024px;
  --large-desktop-min: 1440px;

  /* 响应式间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* ==================== 基础容器自适应 ==================== */

/* 主容器自适应 */
.main-content {
  padding: var(--spacing-lg);
  width: 100%;
}

/* ==================== Element Plus 下拉框全局修复 ==================== */

/* 确保所有弹出层都有合适的层级 */
.el-popper,
.el-select-dropdown,
.el-picker-panel,
.el-cascader-panel,
.el-date-picker__editor,
.el-time-picker__editor {
  z-index: 2000 !important;
}

/* 修复弹窗内下拉框层级问题 */
.el-dialog .el-popper,
.el-dialog .el-select-dropdown,
.el-dialog .el-picker-panel,
.el-dialog .el-cascader-panel {
  z-index: 3100 !important;
}

/* 确保弹窗内的下拉框选项可见 */
.el-select-dropdown.el-popper[data-popper-placement] {
  z-index: 3100 !important;
}

/* 修复弹窗内日期时间选择器 */
.el-dialog .el-date-picker__editor,
.el-dialog .el-time-picker__editor {
  z-index: 3100 !important;
}

/* 通用弹窗内组件层级修复 */
.el-overlay .el-popper,
.el-overlay .el-select-dropdown,
.el-overlay .el-picker-panel,
.el-overlay .el-cascader-panel,
.el-overlay .el-tooltip__popper,
.el-overlay .el-popover {
  z-index: 3100 !important;
}

/* 确保所有弹出组件在弹窗上方 */
[class*="el-popper"][data-popper-placement] {
  z-index: 3100 !important;
}

/* ==================== 平板端适配 (768px - 1023px) ==================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .main-content {
    padding: var(--spacing-md);
  }

  .mobile-menu-toggle {
    display: none !important;
  }
}

/* ==================== 桌面端适配 (≥1024px) ==================== */

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* ==================== 移动端适配 (≤767px) ==================== */

@media (max-width: 767px) {

  /* ========== 基础容器 ========== */
  .main-content {
    padding: var(--spacing-sm);
    width: 100% !important;
    grid-template-columns: 100% !important;
  }

  .info-grid {
    grid-template-columns: auto !important;
  }

  .common-table {
    width: 250%;
  }

  /* ========== 页面容器统一样式 ========== */
  .login-container,
  .index,
  .not-found-container,
  .under-development,
  .customer-list-container,
  .customer-details,
  .stats-analysis-container,
  .chart-container,
  .department-container,
  .role-container,
  .clue-list-container,
  .recycle-container,
  .team-container,
  .team-customer-container,
  .customer-log-container,
  .login-log-container,
  .operation-log-container,
  .review-container,
  .institution-container,
  .notice-container,
  .system-setting-container,
  .task-setting-container,
  .sound-setting-container,
  .work-order-container {
    padding: 10px;
  }

  /* ========== 移动端菜单系统 ========== */
  /* 移动端菜单遮罩层 */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
  }

  /* 移动端隐藏侧边栏，使用抽屉模式 */
  .admin-layout .el-aside {
    position: fixed !important;
    top: 0;
    left: -250px;
    z-index: 2000;
    transition: left 0.3s ease;
    height: 100vh;
    background: var(--theme-bg-primary);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .admin-layout .el-aside.mobile-show {
    left: 0;
  }

  /* 移动端主内容区域全宽 */
  .admin-layout .right-container {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* 移动端顶部导航适配 */
  .admin-layout .el-header {
    padding: 0 10px !important;
    height: 50px !important;
    line-height: 50px !important;
  }

  /* 移动端菜单按钮 */
  .mobile-menu-toggle {
    display: block !important;
    margin-right: 10px;
    background: none !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 24px !important;
  }

  .theme-switch {
    line-height: 33px;
  }

  /* 移动端用户信息简化显示 */
  .user-info .user-name {
    display: none;
  }

  .user-info .user-avatar {
    width: 32px;
    height: 32px;
  }

  /* 移动端菜单打开时禁止页面滚动 */
  body.mobile-menu-open {
    overflow: hidden;
  }

  /* ========== Element Plus 组件移动端适配 ========== */
  /* 下拉框组件层级提升 */
  .el-popper,
  .el-select-dropdown,
  .el-picker-panel,
  .el-cascader-panel {
    z-index: 3001 !important;
  }

  /* 确保下拉框内容可见 */
  .el-select-dropdown.el-popper {
    z-index: 3002 !important;
    max-height: 300px;
    overflow-y: auto;
  }

  /* 日期时间选择器移动端优化 */
  .el-date-picker,
  .el-time-picker {
    z-index: 3002 !important;
  }

  /* 级联选择器移动端优化 */
  .el-cascader-panel {
    max-height: 300px;
    overflow-y: auto;
  }

  /* 下拉框选项移动端优化 */
  .el-select-dropdown__item {
    padding: 12px 20px;
    font-size: var(--font-size-base);
    line-height: 1.4;
  }

  /* 确保下拉框在移动端菜单打开时仍然可用 */
  body.mobile-menu-open .el-popper,
  body.mobile-menu-open .el-select-dropdown {
    z-index: 3003 !important;
  }

  /* 对话框自适应 */
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  .el-dialog__header {
    padding: 15px 20px 10px !important;
  }

  .el-dialog__body {
    padding: 20px !important;
  }

  /* 表单自适应 */
  .el-form-item {
    margin-bottom: 16px !important;
  }

  .el-form-item__label {
    font-size: var(--font-size-base);
    line-height: 1.4;
  }

  .el-input__inner,
  .el-textarea__inner {
    font-size: 16px;
    /* 防止iOS缩放 */
  }

  /* 按钮组自适应 */
  .button-group {
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
  }

  .button-group .el-button {
    width: 100% !important;
    margin: 0 !important;
  }

  .el-button-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  .el-button-group .el-button {
    margin: 0;
  }

  /* 分页自适应 */
  .el-pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .el-pagination .el-pager {
    flex-wrap: wrap !important;
  }

  .el-pagination .el-pagination__jump {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }

  /* ========== 表格组件移动端优化 ========== */
  .el-table {
    font-size: var(--font-size-base);
  }

  .el-table .el-table__cell {
    padding: 8px 4px;
  }

  .el-table .table-actions {
    flex-direction: column;
    gap: 4px;
  }

  .el-table .table-actions .el-button {
    padding: 4px 8px;
    font-size: 12px;
  }

  /* ========== 卡片组件移动端优化 ========== */
  .el-card {
    margin-bottom: 16px;
  }

  .el-card__header {
    padding: 12px 16px !important;
  }

  .el-card__body {
    padding: 16px !important;
  }

  /* ========== 抽屉组件移动端优化 ========== */
  .el-drawer {
    width: 100% !important;
  }

  .el-drawer__header {
    padding: 15px 20px 10px !important;
  }

  .el-drawer__body {
    padding: 20px !important;
  }

  /* ========== 消息提示移动端优化 ========== */
  .el-message {
    min-width: 280px !important;
    max-width: 90% !important;
  }

  .el-notification {
    width: 90% !important;
    right: 5% !important;
  }

  /* ========== 加载组件移动端优化 ========== */
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-loading-text {
    font-size: var(--font-size-base) !important;
  }

  /* ========== 标签页移动端优化 ========== */
  .tabs-view {
    padding: 0 10px;
  }

  .tabs-view .el-tabs__header {
    margin: 0 0 15px 0;
  }

  .tabs-view .el-tabs__nav-wrap {
    padding: 0 10px;
  }

  .tabs-view .el-tabs__item {
    padding: 0 15px;
    font-size: var(--font-size-base);
  }

  .tabs-view .el-tabs__content {
    padding: 0;
  }

  /* ========== 响应式工具类 ========== */
  /* 网格系统 */
  .responsive-grid.cols-2,
  .responsive-grid.cols-3,
  .responsive-grid.cols-4 {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-sm) !important;
  }

  /* 弹性布局 */
  .responsive-flex:not(.column) {
    gap: var(--spacing-sm);
  }

  .responsive-flex.column {
    gap: var(--spacing-sm);
  }

  /* 间距工具类 */
  .p-responsive {
    padding: var(--spacing-sm);
  }

  .px-responsive {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .py-responsive {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .m-responsive {
    margin: var(--spacing-sm);
  }

  .mx-responsive {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }

  .my-responsive {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  /* 文字大小 */
  .text-responsive-lg {
    font-size: 20px;
  }

  .text-responsive-md {
    font-size: 16px;
  }

  .text-responsive-sm {
    font-size: var(--font-size-base);
  }

  .text-responsive-xs {
    font-size: 12px;
  }

  /* 显示隐藏 */
  .hidden-mobile,
  .layout-switch,
  .logo {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline {
    display: inline !important;
  }

  .show-mobile-inline-block {
    display: inline-block !important;
  }

  .k-form-item.w33,
  .bank-card,.menu-tree-panel,.department-tree-panel {
    width: 100% !important;
    max-width: 100% !important;
  }


  .common-pagination-section {
    display: grid;
    padding: 15px 0 !important;
    justify-content: center !important;
  }


  .tg_btm {
    width: 40%;
    margin: 10px auto;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    margin: 0 2px !important;
  }

  .bank-list {
    padding: 0 !important;
  }

  .bank-title {
    text-align: center;
    padding: 0 !important;
    padding-bottom: 20px !important;
  }

  .level-item {
    float: none !important;
    display: table !important;
    margin: auto !important;
  }

  .common-table th {
    white-space: nowrap;
  }

  .menu-container,.main-content{
    display: block !important;
  }
  .menu-management{
    overflow: auto !important;
  }

  .import_h{
    display: none !important; 
  }

  .form_item .input{
    width: 120px;
  }
}